<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<style type="text/css">
			.aui-content, .aui-content-padded {
				background: #ffffff;
			}
			.thumb {
				position: relative;
				max-height: 280px;
				overflow: hidden;
				margin-bottom: 0;
			}
			.thumb > img {
				width: 100%;
			}
			.price-info {
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				background: #ff9900;
				height: 45px;
			}
			.price {
				margin-left: 15px;
				color: #ffffff;
				font-size: 16px;
				line-height: 55px;
			}
			.price strong {
				font-size: 26px;
				margin: 0 5px;
				font-weight: 400;
			}
			.price-info .aui-pull-right {
				height: 55px;
				width: 35%;
				background: #ffcc00;
				padding-top: 5px;
				text-align: center;
			}
			.price-info .aui-pull-right p {
				color: #ff6600;
				font-size: 12px;
				margin-bottom: 0px;
			}
			.goods-basic-info {
				padding: 10px;
				overflow: hidden;
			}
			.goods-title {
				margin-bottom: 5px;
			}
			.aui-tab-nav li.active {
				color: #ff9900;
				border-bottom: 2px #ff9900 solid;
			}
			.info {
				padding: 10px;
				overflow: hidden;
				margin-bottom: 0;
			}
			.info img {
				width: 100%;
			}
			.info p {
				color: #666;
			}
			.aui-border:after {
				border: 1px solid red;
			}
			.aui-content {
				background: #ffffff;
				overflow: hidden;
			}
			.aui-order-header {
				width: 100%;
				padding: 10px 15px;
				color: #999;
				font-size: 14px;
				overflow: hidden;
				line-height: 32px;
			}
			.order-avatar {
				float: left;
				width: 32px;
				height: 32px;
				border-radius: 50%;
			}
			.order-nickname {
				float: left;
				font-size: 14px;
				line-height: 32px;
				margin-left: 10px;
			}
			.order-time {
				font-size: 12px;
			}
			.aui-order-body {
				width: 100%;
			}
			.aui-order-title {
				font-size: 16px;
				color: #333;
				margin-bottom: 5px;
			}
			.aui-order-footer {
				padding: 0 15px 15px 15px;
				overflow: hidden;
				line-height: 30px;
			}
			.aui-order-footer, .comment {
				font-size: 14px;
				color: #999;
			}
			.order-top {
				position: fixed;
				top: 0;
				width: 100%;
				height: 50px
			}
			.mt50 {
				margin-top: 50px
			}
			.my-num {
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			.chide {
				display: none
			}
			.cactive {
				display: block
			}
			.aui-nav .aui-bar-tab {
				background: #34495E;
			}
			.aui-nav .aui-bar-tab li .aui-iconfont, .aui-nav .aui-bar-tab li p {
				color: #fff;
			}
			.aui-nav .aui-bar-tab li.active .aui-iconfont, .aui-nav .aui-bar-tab li.active p {
				color: #14bd7c;
			}
			.aui-nav {
				background: #ff9900;
				font-size: 18px;
				color: #fff;
				text-align: center;
			}
			.aui-nav  div {
				height: 55px;
			}
			.aui-nav .buy {
				line-height: 55px;
			}
			.aui-nav p {
				color: #fff;
			}
			.aui-nav .aui-iconfont {
				font-size: 20px;
				color: #ffffff;
			}
			.blue {
				background: #eee;
			}
			.blue .aui-iconfont, .blue p {
				color: #999;
			}
			.service {
				background: #eec363;
			}
			.red {
				background: #e74c3c;
			}
			.yellow{
			   background: #FFF5E4;
			   border-left: 1px solid #AAAAAA;
			   color: #ED9126;
			}
			.yellow i,.yellow p{
			   color: #ED9126 !important;
			}
			.aui-bar-danger {
				background-color: #34495e;
			}
			 #wrap{
			   width: 100%;
			   background: rgba(00,00,00,0.5);
			   position:fixed;
			   bottom: 0px;
			   display: none;
			   z-index: 999;
			 }
			  .goodinfo{			      
			      width: 100%;
			      background: #FFFFFF;			      
			      padding: 10px;
			      position:absolute;
			      bottom: 0px;
			  }
			  .imgsize{
			     width: 50px;
			  }
			  .aui-img{
			     border-bottom: 1px solid #EEEEEE;
			     padding: 5px;
			  }
			  .goodinfo span{
			     padding: 2px 5px;
			     border: 1px solid #EEEEEE;
			     margin: 0px 5px;
			  }
			  .goodinfo p{
			    color: #000000;
			    padding: 5px 3px;
			  }
			  .color,.size{
			    border-bottom: 1px solid #EEEEEE;
			    padding: 5px;
			  }
			  .num{
			     padding: 10px;
			     border-bottom: 1px solid #EEEEEE;
			  }
			  .mybtn{
			    text-align:center;
			  }
			  .mybtn button{
			    margin: 10px 30px;
			  }
			  .myactive{
			    background:red;
			    color:#FFFFFF;
			  }
			  #choice{
			    background-color: #FFFFFF;
			  }
		</style>
	</head>
	<body style="background: ##FFFFFF">
		<div style="position: fixed;bottom: 50px;right: 30px;z-index:999;" >
			<a href="#top"><img src="../../image/top.jpg" style="height: 50px;border-radius: 30px;" alt="" /></a>
		</div>
		<div>
			<section class="aui-content thumb">
				<img src="../../image/onecoin-1.jpeg">
				<div class="price-info">
					<span class="price">¥<strong>1.00</strong>元</span>
					<div class="aui-pull-right">
						<p style="line-height: 35px;">
							2016件已售
						</p>
					</div>
				</div>
			</section>
			<section class="aui-content goods-basic-info">
				<div class="goods-title">
					恋恋不舍一元创业卡
					<br />
					<span style="color: red">惊喜价：￥1</span>
				</div>
				<p>
					<span class="aui-pull-left">快递：0.00元</span>
					<span class="aui-pull-right"></span>
				</p>
			</section>
			<section class="aui-user-view-cell ">
					    <a id="choice" class="aui-arrow-right">
					                选择商品属性
					    </a>
			</section>
			<section class="aui-tab">
				<ul class="aui-tab-nav" id="ordertab" >
					<li class="active" id="b0">
						产品详情
					</li>
					<li id="b1">
						热门点评
					</li>
				</ul>
			</section>
			<div id="tab0">
				<section class="aui-content info">
					<img class="aui-img-object aui-pull-left" src="../../image/onecoin-2.jpeg">
					<img class="aui-img-object aui-pull-left" src="../../image/onecoin-3.jpeg">
					<img class="aui-img-object aui-pull-left" src="../../image/onecoin-4.jpeg">
					<img class="aui-img-object aui-pull-left" src="../../image/onecoin-5.jpeg">
					<img class="aui-img-object aui-pull-left" src="../../image/onecoin-6.jpeg">
					<img class="aui-img-object aui-pull-left" src="../../image/onecoin-7.jpeg">
					<img class="aui-img-object aui-pull-left" src="../../image/onecoin-8.jpeg">
				</section>
			</div>
			<div id="tab1" class="chide">
				<div style="height: 15px"></div>
				<div style="background: #ffffff;padding: 10px">
					<span style="color: #aaaaaa">评价(2043)</span><span style="float: right;color: red">好评率&nbsp;98%</span>
					<div style="clear: both;height: 10px"></div>
					<div>
						<ul class="aui-list-view">
							<li class="aui-list-view-cell">
								<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
								<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
								<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
								<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
								<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
								<span style="float: right;color: #aaaaaa">bababala</span>
								<br />
								物美价廉，物美价廉，物美价廉，物美价廉物美价廉，物美价廉，
								<br />
								<img src="../../image/noavatar.gif" alt="" />
							</li>
							<ul class="aui-list-view">
								<li class="aui-list-view-cell">
									<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
									<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
									<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
									<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
									<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
									<span style="float: right;color: #aaaaaa">bababala</span>
									<br />
									物美价廉，物美价廉，物美价廉，物美价廉物美价廉，物美价廉，
									<br />
									<img src="../../image/noavatar.gif" alt="" />
								</li>
								<ul class="aui-list-view">
									<li class="aui-list-view-cell">
										<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
										<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
										<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
										<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
										<span class="aui-iconfont aui-icon-favorfill " style="color: red"></span>
										<span style="float: right;color: #aaaaaa">bababala</span>
										<br />
										物美价廉，物美价廉，物美价廉，物美价廉物美价廉，物美价廉，
										<br />
										<img src="../../image/noavatar.gif" alt="" />
									</li>
								</ul>
					</div>
				</div>
			</div>
			<div id="wrap">
			    <div id="goodinfo" class="goodinfo">
			         <div class="aui-img">
			            <img class="aui-img-object aui-pull-left imgsize" src="../../image/demo3.png">
			            <div class="aui-img-body">
			                                             商品名称  商品名称  商品名称
			                <p>库存：20</p>
			            </div>
			         </div>
			        <div id="color" class="color">
			         <p>颜色</p>
			         <span class="myactive">蓝色</span><span>红色</span><span>绿色</span>
			        </div>
			        <div id="size" class="size">
			         <p>大小</p>
			         <span class="myactive">L</span><span>M</span><span>S</span>
			        </div>
			        <div id="num" class="num">
			                              数量
				          <div class="aui-counter aui-pull-right">
	                        <div id="minus" class="aui-counter-minus aui-disabled"></div>
	                        <input id="val" class="aui-counter-input" type="text" value="1">
	                        <div id="plus" class="aui-counter-plus"></div>
	                     </div>
			        </div>
			        <div class="mybtn">
			          <button class="aui-btn aui-btn-warning">加入购物车</button><button class="aui-btn aui-btn-danger">立即购买</button>
			        </div>
			   </div>
			</div>
		<footer class="aui-nav" id="aui-footer">
		    <div class="aui-col-xs-2  yellow" id="main" tapmode >
				<i class="aui-iconfont aui-icon-service"></i>
				<p>客服</p>
			</div>
			<div class="aui-col-xs-2 yellow" id="main" tapmode >
				<i class="aui-iconfont aui-icon-favor"></i>
				<p>收藏</p>
			</div>
			<div class="aui-col-xs-4 buy" id="main" tapmode >
				加入购物车 <span class="aui-iconfont aui-icon-cart"></span>
			</div>
			<div class="aui-col-xs-4 buy red" id="main" tapmode >
				立即购买 <span class="aui-iconfont aui-icon-recharge "></span>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script>
	   $(document).ready(function(){
	      $("#choice").click(function(){
	            $("#wrap").show().css('height',$(window).height());
	         });
	      $("#wrap").click(function(){
	           $("#wrap").hide(); 
	      });
	      $("#goodinfo").click(function(){
	         return false;
	      });
	      $("#color span").click(function(){
	             
	            $(this).addClass('myactive').siblings('span').removeClass('myactive');
	        
	      });
	      $("#size span").click(function(){
	             
	            $(this).addClass('myactive').siblings('span').removeClass('myactive');
	        
	      });
	      var val = 1;
	      $("#plus").click(function(){
	         val = val + 1;
	         if(val < 1){
	           $("#minus").addClass('aui-disabled');
	         }else{
	           $("#minus").removeClass('aui-disabled');
	           $("#val").val(val);
	         }
	      });
	      $("#minus").click(function(){
	         val = val - 1;
	         if(val < 1){
	           $("#minus").addClass('aui-disabled');
	         }else{
	           $("#minus").removeClass('aui-disabled');
	           $("#val").val(val);
	         }
	      });
	     
	   });
	</script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			setTab();
		}
		function setTab() {
			var ordertab = $api.domAll("#ordertab li");
			for (var i in ordertab) {
				$api.addEvt(ordertab[i], 'click', function() {
					$api.removeCls($api.dom("#ordertab li.active"), 'active');
					$api.addCls(this, 'active');
					var id = $api.attr(this, 'id');
					for (var j = 0; j < 2; j++) {
						$api.removeCls($api.byId('tab' + j), 'cactive');
						$api.addCls($api.byId('tab' + j), 'chide');
					}
					$api.addCls($api.byId('ta' + id), 'cactive');
				});
			}
		}
	</script>
</html>